import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class BindPhonePage extends StatefulWidget {
  const BindPhonePage({super.key});

  @override
  State<BindPhonePage> createState() => _BindPhonePageState();
}

class _BindPhonePageState extends State<BindPhonePage> {
  final _phoneController = TextEditingController();
  final _codeController = TextEditingController();
  bool _isCodeSent = false;

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final color = Theme.of(context).colorScheme;

    return Scaffold(
      appBar: AppBar(title: Text(l10n.bindPhoneTitle)),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          TextField(
            controller: _phoneController,
            keyboardType: TextInputType.phone,
            decoration: InputDecoration(
              labelText: l10n.bindPhonePhone,
              prefixIcon:
                  Icon(Icons.phone_android, color: color.onSurfaceVariant),
              filled: true,
              fillColor: color.surfaceContainerHighest.withOpacity(0.3),
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(12),
                  borderSide: BorderSide.none),
            ),
          ),
          const SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _codeController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    labelText: l10n.bindPhoneVerificationCode,
                    prefixIcon:
                        Icon(Icons.verified, color: color.onSurfaceVariant),
                    filled: true,
                    fillColor: color.surfaceContainerHighest.withOpacity(0.3),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(12),
                        borderSide: BorderSide.none),
                  ),
                ),
              ),
              const SizedBox(width: 12),
              FilledButton(
                onPressed: _isCodeSent ? null : _sendCode,
                child: Text(
                    _isCodeSent ? l10n.bindPhoneSent : l10n.bindPhoneGetCode),
              ),
            ],
          ),
          const SizedBox(height: 32),
          FilledButton.icon(
            onPressed: _bindPhone,
            icon: const Icon(Icons.check),
            label: Text(l10n.bindPhoneBind),
          ),
        ],
      ),
    );
  }

  void _sendCode() {
    setState(() => _isCodeSent = true);
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(AppLocalizations.of(context)!.bindPhoneCodeSent)),
    );
  }

  void _bindPhone() {
    // TODO: 手机验证逻辑
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(AppLocalizations.of(context)!.bindPhoneSuccess)),
    );
    Navigator.pop(context);
  }
}
